<template>
  <div class="home">
    <div class="head">
      <div class="avatar" @click="handleUserInfo">
        <img src="../../comment/images/avatar.jpg" alt />
      </div>
      <div class="title">待办</div>
      <div class="calendar" @click="handleCalendar">
        <van-icon name="calender-o" />
      </div>
      <div class="manage" @click="handleBtnShow" v-if="!isBtnShow">管理</div>
      <div class="manage" @click="handleBtnShow" v-else>完成</div>
    </div>
    <div class="bullhorn">
      <van-icon name="bullhorn-o" class="icon" />千里之行，始于足下
    </div>
    <div class="todo_content">
      <ul class="todos">
        <li class="todo" v-for="(item, index) in todos" :key="index">
          <div class="time">
            <div class="day">{{ item.day }}</div>
            <div class="week">{{ item.week }}</div>
          </div>
          <div class="content">{{ item.todo }}</div>
          <div class="btn" v-show="isBtnShow">
            <van-button type="info" class="finished" @click="handleModify(index)">修改</van-button>
            <van-button type="warning" class="del" @click="handleDel(index)">删除</van-button>
          </div>
        </li>
      </ul>
    </div>
    <div class="add_todo">
      <div class="add" @click="handleAdd">+ 添加待办</div>
    </div>
    <div class="user_info">
      <van-popup
        v-model="show"
        position="left"
        :style="{ height: '100%', width: '100%' }"
        closeable
        close-icon="cross"
        close-icon-position="top-left"
      >
        <div class="title">我</div>
        <div class="user_des">
          <div class="avatar">
            <img src="../../comment/images/avatar.jpg" alt />
          </div>
          <div class="nick_name">{{ username }}</div>
        </div>
        <ul class="charactor">
          <li>性别：{{gender === '1' ? '男' : '女'}}</li>
          <li>星座：{{ constellation }}</li>
          <li>职业：{{ profession }}</li>
        </ul>
      </van-popup>
    </div>
    <div>
      <van-calendar v-model="isCalendarShow" @confirm="onConfirm" />
    </div>
    <div class="add_new">
      <van-popup
        v-model="addNewShow"
        position="right"
        :style="{ height: '100%', width: '100%' }"
        closeable
        close-icon="cross"
        close-icon-position="top-left"
      >
        <div class="head">
          <div class="title">新建待办</div>
          <div class="affirm" @click="handleAddTodo">确认</div>
        </div>
        <van-field v-model="message" rows="10" autosize type="textarea" placeholder="请输入待办事项" />
      </van-popup>
    </div>
    <modify
      :modifyShow="modifyShow"
      :modifyMessage="modifyMessage"
      @modifyShowChange='modifyShowChange'
      @modifyMessageChange='modifyMessageChange'
    />
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
    Modify: () => import('../../components/Modify')
  },
  data() {
    return {
      radio: '1',
      show: false,
      isCalendarShow: false,
      isBtnShow: false,
      addNewShow: false,
      message: '',
      email: '',
      avatar: '',
      constellation: '',
      profession: '',
      username: '',
      gender: '',
      todos: [],
      modifyShow: false,
      modifyMessage: '',
      modifyIndex: 0
    }
  },
  created() {
    // 获取用户信息
    this.$axios
      .get('/api/user/login', {
        headers: {
          Authorization: localStorage.getItem('todo_token')
        }
      })
      .then(res => {
        const data = res.data
        this.email = data.email
        this.avatar = data.avatar
        this.constellation = data.constellation
        this.profession = data.profession
        this.radio = data.gender
        this.username = data.username
        return Promise.resolve(data.email)
      })
  },
  mounted() {
    this.getTodo()
  },
  methods: {
    handleUserInfo(e) {
      // 点击头像，显示用户详细信息
      this.show = true
    },
    handleCalendar(e) {
      // 点击图标，显示日历
      this.isCalendarShow = true
    },
    handleBtnShow(e) {
      // 点击管理，显示操作按钮
      this.isBtnShow = !this.isBtnShow
    },
    handleModify(index) {
      // 点击按钮，表示待办事件已完成
      // 将事件内容颜色变成，中间加一道横线
      this.modifyShow = true
      this.modifyMessage = this.todos[index].todo
      this.modifyIndex = index
    },
    handleDel(index) {
      // 点击按钮，表示要删除事件
      // 将待办事件从数据中移除，重新渲染页面
      this.$axios({
        method: 'delete',
        url: '/api/todo/delete/' + index,
        headers: {
          Authorization: localStorage.getItem('todo_token')
        },
        data: {
          email: this.email
        }
      }).then(res => {
        this.getTodo()
      })
    },
    handleAdd(e) {
      // 点击添加待办事项
      // 跳转到编辑页面，输入内容
      this.addNewShow = true
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      this.isCalendarShow = false
      this.date = this.formatDate(date)
    },
    handleAddTodo(e) {
      // 点击确认按钮，确认添加待办事件
      // 发送一个post请求，将事件addto待办的数据库中
      this.addNewShow = false
      this.$axios({
        url: '/api/todo/add',
        method: 'post',
        headers: {
          Authorization: localStorage.getItem('todo_token')
        },
        data: {
          email: this.email,
          todo: this.message
        }
      })
        .then(res => {
          this.getTodo()
          console.log(res)
        })
        .catch(err => {
          throw err
        })
    },

    // 获取用户todo数据
    getTodo() {
      this.$axios({
        url: '/api/todo/',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('todo_token')
        },
        data: {
          email: this.email
        }
      }).then(res => {
        this.todos = [...res.data.todos]
      })
    },

    // 修改数据后隐藏modify页面
    modifyShowChange(val) {
      console.log(val)
      this.modifyShow = val
    },

    // 修改数据后将modify中的内容清空
    modifyMessageChange(val) {
      this.modifyMessage = val
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './index.styl';
</style>
